<template>
  <div>
    <el-container>
      <div class="hhh"></div>
      <el-header class="header">
        <el-row class="fixed">
          <el-col :span="24">
            <div class="grid-content">
              <el-image
                src="http://likede2-admin.itheima.net/img/logo.3673fab5.png"
                style="width: 88px"
              ></el-image>
              <el-col :span="3">
                <el-col class="userIcon" :span="5">
                  <img src="@/assets/userIcon.png" alt="" />
                </el-col>
                <el-col class="userName" :span="14">
                  <span>欢迎您，admin</span>
                </el-col>
                <el-col class="logOut" :span="5">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="退出登录"
                    placement="bottom"
                  >
                    <span @click="logOutClick"
                      >退出<i class="el-icon-caret-bottom"></i
                    ></span>
                  </el-tooltip>
                </el-col>
              </el-col>
            </div>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
    <el-container>
        <el-aside  width="200px">
          <el-menu  :router='true' open="2" default-active="/echarts" class="el-menu-vertical-demo">
            <!-- -------------------帝可得-------------------->
          <el-menu-item  index="/echarts">
            <i class="el-icon-menu"></i>
            <span slot="title">帝可得</span>
          </el-menu-item>
          <!-- --------------------工单管理-------------------->
          <el-submenu index="2">
            <template #title>
              <i class="el-icon-location"></i>
              <span>工单管理</span>
            </template>
              <el-menu-item index="2-1">运营工单</el-menu-item>
              <el-menu-item index="2-2">运维工单</el-menu-item>
          </el-submenu>
          <!-- --------------------设备管理-------------------->
          <el-submenu index="3">
            <template #title>
              <i class="el-icon-location"></i>
              <span>设备管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">设备管理</el-menu-item>
              <el-menu-item index="3-2">设备状态</el-menu-item>
              <el-menu-item index="3-3">设备类型管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- --------------------人员管理-------------------->
           <el-submenu index="4">
            <template #title>
              <i class="el-icon-location"></i>
              <span>人员管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1">人员列表</el-menu-item>
              <el-menu-item index="4-2">人效统计</el-menu-item>
              <el-menu-item index="4-3">工作量列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
           <!-- --------------------人员管理-------------------->
           <el-submenu index="5">
            <template #title>
              <i class="el-icon-location"></i>
              <span index="5-1">商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1">商品类型</el-menu-item>
              <el-menu-item index="5-2">商品管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- --------------------策略管理-------------------->
          <el-menu-item index="6">
            <i class="el-icon-menu"></i>
            <span slot="title">策略管理</span>
          </el-menu-item>
          <!-- --------------------订单管理-------------------->
          <el-menu-item index="7">
            <i class="el-icon-menu"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <!-- --------------------对账统计-------------------->
          <el-menu-item index="8">
            <i class="el-icon-menu"></i>
            <span slot="title">对账统计</span>
          </el-menu-item>
        </el-menu>
        </el-aside>
         <el-main><router-view></router-view></el-main>
    </el-container>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    ...mapMutations('user', ['logout']),
    logOutClick () {
      this.$router.push('/login')
      this.logout()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  overflow: hidden;
}
.hhh {
  height: 60px;
}
.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
  background: url("@/assets/header.png") no-repeat center;
  background-size: cover;

  .grid-content {
    height: 60px;
    position: relative;
    .el-image {
      position: absolute;
      height: 30px;
      top: 15px;
    }
    .el-col-3 {
      height: 60px;
      position: absolute;
      right: 15px;
      .userIcon {
        line-height: 60px;
        img {
          vertical-align: middle;
        }
      }
      .userName {
        height: 60px;
        line-height: 60px;
        span {
          color: #fff;
          font-size: 15px;
        }
      }
      .logOut {
        .item {
          display: inline-block;
          height: 60px;
          line-height: 60px;
          cursor: pointer;
          color: #fff;
          font-size: 15px;
        }
      }
    }
  }
}
.el-aside {
  height: 92vh;
  .el-menu {
    overflow: hidden;
    border: 1px solid transparent;
  }
}
.el-main {
  background-color: #f8fafd;
  height: 93vh;
}
::-webkit-scrollbar {
  width: 0px;
}
</style>
